<?php

$id = $_GET['id'];

$currentPage = 0;

if(isset($_GET['page'])) {
	$currentPage = $_GET['page'];
}

if($_GET['page'] < 0) {
	$currentPage = 0;
}


$username="root";
$password="dwd4zx6p";
$database="docdiscuss";

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database\n");

$query="SELECT * from documents WHERE id = '$id'";
$result = mysql_query($query);

$pages = 0;
$width = 0;
$height = 0;
$filename = "";

while($row = mysql_fetch_array($result))
{
	$pages = $row['pages'];
	$width = $row['width'];
	$height = $row['height'];
	$filename = $row['filename'];
}

if($currentPage >= $pages) {
	$currentPage = $pages-1;
}


?>

<html>
<div align="center">
<h2>DocDiscuss Annotation Engine</h2>
<a href="index.php">Home</a><br/>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<a href="annotate.php?id=<?php echo $id;?>&page=<?php echo ($currentPage-1); ?>">Previous Page</a> | <a href="annotate.php?id=<?php echo $id;?>&page=<?php echo ($currentPage+1); ?>">Next Page</a><br/>Current page - Page <?php echo $currentPage; ?> out of <?php echo $pages; ?>
<br/>
<script>
  function pyt(x1, y1, x2, y2){
    return Math.sqrt(Math.pow(x1-x2, 2), Math.pow(y1-y2, 2));
  }
  
  var percentCovered = function (dim1, dim2) {
  		// The whole thing is covering the whole other thing
  		if (
  			(dim1.left <= dim2.left) && 
  			(dim1.top <= dim2.top) && 
  			((dim1.left + dim1.width) >= (dim2.left + dim2.width)) && 
  			((dim1.top + dim1.height) > (dim2.top + dim2.height))
  		) {
  			return 100;
  		}
  		// Only parts may be covered, calculate percentage
  		else {
  			dim1.right		= dim1.left + dim1.width;
  			dim1.bottom		= dim1.top + dim1.height;
  			dim2.right		= dim2.left + dim2.width;
  			dim2.bottom		= dim2.top + dim2.height;

  			var l = Math.max(dim1.left, dim2.left);
  			var r = Math.min(dim1.right, dim2.right);
  			var t = Math.max(dim1.top, dim2.top);
  			var b = Math.min(dim1.bottom, dim2.bottom);

  			if (b >= t && r >= l) {
  			/*	$('<div/>').appendTo(document.body).css({
  					background:	'red', 
  					position:	'absolute',
  					left:		l + 'px', 
  					top:		t + 'px', 
  					width:		(r - l) + 'px', 
  					height:		(b - t) + 'px', 
  					zIndex:		100
  				}); */

  				var percent = (((r - l) * (b - t)) / (dim2.width * dim2.height)) * 100;

  			//	alert(percent + '% covered')

  				return percent;
  			}
  		}
  		// Nothing covered, return 0
  		return 0;
  	};
  	
  	var selectBox = $("#highlight");
  	
  	var selectElementsInRange = function () {
    		var selectBox = $("#highlight");
    		if (selectBox.css("display") == "none") {
    			return;
    		}
        
    		var selectables		= $(".word");
    		var selectBoxOffset	= selectBox.offset();
    		var selectBoxDim	= {
    			left:	selectBoxOffset.left, 
    			top:	selectBoxOffset.top, 
    			width:	selectBox.width(), 
    			height:	selectBox.height()
    		};

    		selectables.each(function (i) {
    			var el			= $(this);
    			var elOffset	= el.offset();
    			var elDim		= {
    				left:	elOffset.left, 
    				top:	elOffset.top, 
    				width:	el.width(), 
    				height:	el.height()
    			};

    			if (percentCovered(selectBoxDim, elDim) > 0.5) {
    				el.css("border", "1px solid blue");
    				el.addClass("selected");
    			}
    			else {
    				el.css("border", "none");
    				el.removeClass("selected");
    			}
    		});
    	};

    
  
  $(function(){
    $("#image").mousedown(function(e){
              var y = e.pageX - e.currentTarget.offsetLeft;
              var x = e.pageY - e.currentTarget.offsetTop;
              var hl = $("#highlight");
              $("#highlight").css("display", "block").css("top", x).css("left", y).css("height", 0).css("width", 0);
            }).mousemove(function(e){
              var y = e.pageX - e.currentTarget.offsetLeft;
              var x = e.pageY - e.currentTarget.offsetTop;
              var h = x-parseFloat($("#highlight").css("top"));
              var w = y-parseFloat($("#highlight").css("left"));
              $("#highlight").css("height", h).css("width", w);
              selectElementsInRange();
            }).mouseup(function(e){
                $("#highlight").css("display", "none").css("height", 0).css("width", 0);
                var text = "";
                $(".selected").each(function(){
                    text += $(this).text() + " ";
                 })
                 alert(text);
                 
            });
        
<?php
	$generateXMLPath = "jobs/" . $id . "/" . "xml/master.xml_data/pageNum-" . ($currentPage+1) . ".xml";
	$temp = explode(".",$filename);
	$noExt = $temp[0];
	if($pages == 1) {
	$generateJPEGPath = "jobs/" . $id . "/" . "thumbnails/" . $noExt . ".jpg";
	} else {
	$generateJPEGPath = "jobs/" . $id . "/" . "thumbnails/" . $noExt . "-" . $currentPage . ".jpg";
	}
?>
   
    $.get("<?php echo $generateXMLPath; ?>", {}, function(xml){
        $(xml).find("PAGE").first().find("TOKEN").each(function(){
            var obj = $(this);
            var x = -1+parseFloat(obj.attr("x"));
            var y = -1+parseFloat(obj.attr("y"));
            var h = 2+parseFloat(obj.attr("height"));
            var w = 2+parseFloat(obj.attr("width"));
            $('<div class="word" style="position: absolute; height:' + h + '; width: '+ w +'; top: '+(y)+'; left: ' + (x) + '"><p style="display: none">' + obj.text() + '</p></div>').appendTo('#image');
        });
    }, "xml");
    
  });
  
</script>
<body>
  
    
    <div style="background: url(<?php echo $generateJPEGPath; ?>); position: relative; width: <?php echo $width; ?>px; height: <?php echo $height; ?>px" id="image">
        <div id="highlight" style="position:absolute; border: 1px dashed blue; display:none;"></div>
    </div>
</div>
  </body>
</html>

